<template>
  <el-table border row-key="id" default-expand-all :data="tableData"
            :header-cell-style="{'background-color': '#f6f6f6'}" style="min-height: 63vh;">
    <el-table-column v-for="item in tableType" :label="item.label" :width="item.width" align="center">
      <template #default="scope" v-if="
                item.showType!=='sex'
                &&item.showType!=='img'
                &&item.showType!=='text'
                &&item.showType!=='state'
                &&item.showType!=='icon'
                &&item.showType!=='borrow'
                &&item.showType!=='borrowType'
">
        <span>{{ scope.row[item.prop] }}</span>
      </template>
      <!--   图标   -->
      <template #default="scope" v-if="item.showType==='icon'">
        <component :is="scope.row[item.prop]"></component>
      </template>
      <!--   性别   -->
      <template #default="scope" v-if="item.showType==='sex'">
        <el-tag :type="scope.row[item.prop] === '男'? 'primary' : 'danger'">
          {{ scope.row[item.prop] }}
        </el-tag>
      </template>
      <!--   头像   -->
      <template #default="scope" v-if="item.showType==='img'">
        <img v-if="scope.row[tableType[4].prop]==='男'" :class="item.showType" src="@/assets/avatar-male.png"
             :alt="scope.row[item.prop]">
        <img v-if="scope.row[tableType[4].prop]==='女'" :class="item.showType" src="@/assets/avatar-female.png"
             :alt="scope.row[item.prop]">
      </template>
      <!--   状态   -->
      <template #default="scope" v-if="item.showType==='state'">
        <el-tag :type="scope.row[item.prop] === 1?'primary':'danger'">
          {{ scope.row[item.prop] === 1 ? '正常' : '禁用' }}
        </el-tag>
      </template>
      <!--   在库状态   -->
      <template #default="scope" v-if="item.showType==='borrow'">
        <el-tag :type="scope.row[item.prop] === 1?'primary':'danger'">
          {{ scope.row[item.prop] === 1 ? '在库' : '借出' }}
        </el-tag>
      </template>
      <!--   借阅行为   -->
      <template #default="scope" v-if="item.showType==='borrowType'">
        <el-tag :type="scope.row[item.prop] === 1?'primary':'danger'">
          {{ scope.row[item.prop] === 1 ? '还书' : '借书' }}
        </el-tag>
      </template>
      <!--   备注   -->
      <template #default="scope" v-if="item.showType==='text'">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row[item.prop] }}</div>
          </template>
          <template #reference>
            <span class="text-overflow"> {{ scope.row[item.prop] }} </span>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200" align="center">
      <template #default="scope">
        <el-button link size="small" type="primary" @click="onBorrow(scope.$index, scope.row)">
          借书
        </el-button>
        <el-button link size="small" type="success" @click="onReturn(scope.$index, scope.row)">
          还书
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import {defineProps} from "vue";

interface Props {
  tableType?: Array<any>;
  tableData?: Array<any>;
  onBorrow?: Function;
  onReturn?: Function;
}

defineProps<Props>();
</script>

<style scoped>
::-webkit-scrollbar {
  width: 0; /* 横向滚动条的宽度 */
  height: 12px; /* 纵向滚动条的高度 */
}

.img {
  width: 30px;
  height: 30px;
}

.text-overflow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

svg {
  width: 18px;
  height: 18px;
  color: white;
}
</style>